<template>
    <div class="flex-col-start">
        <div class="flex-col-start container" :style="{
            width: props.controller ? widthControl + 'px' : width + 'px',
            height: props.controller ? heightControl + 'px' : height + 'px',
        }">
            <video :style="{
                transform: `translate(${props.controller ? xControl : props.x}px, ${
                    props.controller ? yControl : props.y
                }px) scale(${props.controller ? scaleControl : props.scale})`,
            }" :src="props.src" muted autoplay playsinline loop webkit-playsinline></video>
        </div>
        <div class="controller" v-if="props.controller">
            <div>
                <span>宽（{{ widthControl }}）</span>
                <van-slider v-model="widthControl" :min="0" :max="750" />
            </div>
            <div>
                <span>高{{ heightControl }}）</span>
                <van-slider v-model="heightControl" :min="0" :max="1800" />
            </div>
            <div>
                <span>缩放{{ scaleControl }}</span>
                <van-slider v-model="scaleControl" :step="0.01" :min="0.1" :max="5" />
            </div>
            <div>
                <span>x偏移{{ xControl }}</span>
                <van-slider v-model="xControl" :min="-1200" :max="1200" />
            </div>
            <div>
                <span> y偏移{{ yControl }} </span>
                <van-slider v-model="yControl" :min="-1200" :max="1200" />
            </div>
        </div>
    </div>

</template>


<script lang="ts" setup>
// 用法
// <van-popup
//             :show="show"
//             style="background-color: transparent"
//             @close="onClose"
//             :close-on-click-overlay="true">
//             <VideoPlayer
//                 :src="src"
//                 @click="onClose"
//                 :controller="true" // 用来调试MP4格式展示区域
//                 :scale=""
//                 :width=""
//                 :height=""
//                 :x=""
//                 :y=""
//              />
//         </van-popup>
import { ref } from 'vue';

const props = defineProps<{
    src: string;
    controller?: boolean;
    width?: number | string;
    height?: number | string;
    scale?: number | string;
    x?: number | string;
    y?: number | string;
}>();

const widthControl = ref(325);
const heightControl = ref(325);
const scaleControl = ref(1);
const xControl = ref(0);
const yControl = ref(0);
</script>

<style scoped lang="scss">
.container {
    overflow: hidden;
}
.controller {
    margin-bottom: 100px;
    width: 700px;
    height: 100%;
    div {
        margin-top: 20px;
    }
}
</style>
